<template>
  <div>
    <div class="top_box">
      <div>
        <img style="height: 13rem" src="@/assets/home/left.png" alt="" />
      </div>
      <div style="width: 100%">
        <div style="display: flex; justify-content: space-between; margin-top: 1rem">
          <div class="title" style="margin-left: 3rem; font-size: 2rem; font-weight: bold"></div>
          <!-- 正常过高过低样式 -->
          <div style="display: flex; margin-right: 2rem">
            <img style="width: 90%" src="@/assets/home/status.png" alt="" />
          </div>
        </div>

        <div>
          <div v-if="item.remark == 0 ? true : false" class="box">
            <div class="item_title">水质监测</div>
            <div class="item_box" v-for="(item, index) in goinList" :key="index">
              <div>
                <i @click="showModal(item)" class="el-icon-s-data" style="color: #e2e2e4; position: absolute; right: 0.3rem; bottom: 0; cursor: pointer; font-size: 1.3rem">
                </i>
              </div>
              <img src="" alt="" />
              <div style="margin-bottom: 2rem; align-items: center; line-height: 1rem">
                <div style="margin-bottom: 1rem; margin-top: -1rem; color: #0386ff; font-weight: bold">
                  {{ item.realDataConvert }}
                  <span style="font-size: 1rem">{{ item.unit }} </span>
                </div>
                <div style="font-size: 1.3rem">
                  {{ item.deviceName }}
                </div>
              </div>
            </div>
          </div>
          <div v-if="item.remark == 1 ? true : false" class="box">
            <div class="item_title">水位监测</div>
            <div class="item_box" v-for="(item, index) in goinList" :key="index">
              <div>
                <i @click="showModal(item)" class="el-icon-s-data" style="color: #e2e2e4; position: absolute; right: 0.3rem; bottom: 0; cursor: pointer; font-size: 1.3rem">
                </i>
              </div>
              <img src="" alt="" />
              <div style="margin-bottom: 2rem; align-items: center; line-height: 1rem">
                <div style="margin-bottom: 1rem; margin-top: -1rem; color: #0386ff; font-weight: bold">
                  {{ item.realDataConvert }}
                  <span style="font-size: 1rem">{{ item.unit }} </span>
                </div>
                <div style="font-size: 1.3rem">
                  {{ item.deviceName }}
                </div>
              </div>
            </div>
          </div>
          <div v-if="item.remark == 2 ? true : false" class="box">
            <div class="item_title">流量监测</div>
            <div class="item_box" v-for="(item, index) in goinList" :key="index">
              <div>
                <i @click="showModal(item)" class="el-icon-s-data" style="color: #e2e2e4; position: absolute; right: 0.3rem; bottom: 0; cursor: pointer; font-size: 1.3rem">
                </i>
              </div>
              <img src="" alt="" />
              <div style="margin-bottom: 2rem; align-items: center; line-height: 1rem">
                <div style="margin-bottom: 1rem; margin-top: -1rem; color: #0386ff; font-weight: bold">
                  {{ item.realDataConvert }}
                  <span style="font-size: 1rem">{{ item.unit }} </span>
                </div>
                <div style="font-size: 1.3rem">
                  {{ item.deviceName }}
                </div>
              </div>
            </div>
          </div>
          <div v-if="item.remark == 3 ? true : false" class="box">
            <div class="item_title">水泵监测</div>
            <div class="item_box" v-for="(item, index) in goinList" :key="index">
              <div>
                <i @click="showModal(item)" class="el-icon-s-data" style="color: #e2e2e4; position: absolute; right: 0.3rem; bottom: 0; cursor: pointer; font-size: 1.3rem">
                </i>
              </div>
              <img src="" alt="" />
              <div style="margin-bottom: 2rem; align-items: center; line-height: 1rem">
                <div style="margin-bottom: 1rem; margin-top: -1rem; color: #0386ff; font-weight: bold">
                  {{ item.realDataConvert }}
                  <span style="font-size: 1rem">{{ item.unit }} </span>
                </div>
                <div style="font-size: 1.3rem">
                  {{ item.deviceName }}
                </div>
              </div>
            </div>
          </div>
          <div v-if="item.remark == 4 ? true : false" class="box">
            <div class="item_title">设备监测</div>
            <div class="item_box" v-for="(item, index) in goinList" :key="index">
              <div>
                <i @click="showModal(item)" class="el-icon-s-data" style="color: #e2e2e4; position: absolute; right: 0.3rem; bottom: 0; cursor: pointer; font-size: 1.3rem">
                </i>
              </div>
              <img src="" alt="" />
              <div style="margin-bottom: 2rem; align-items: center; line-height: 1rem">
                <div style="margin-bottom: 1rem; margin-top: -1rem; color: #0386ff; font-weight: bold">
                  {{ item.realDataConvert }}
                  <span style="font-size: 1rem">{{ item.unit }} </span>
                </div>
                <div style="font-size: 1.3rem">
                  {{ item.deviceName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom_box_">
      <div>
        <img style="height: 13rem" src="@/assets/home/bottom.png" alt="" />
      </div>
      <div style="display: flex">
        <div class="bottom_box" v-for="(item, index) in boxArray" :key="index" style="display: flex; margin-left: 2rem">
          <div class="left" v-if="item.type == 0" style="background-color: #f4f8f9; box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2); border-radius: 8px; width: 40rem; height: 15rem; margin-bottom: 2rem; margin-left: 1rem">
            <div class="title">
              <div class="square"></div>
              抽水模式
            </div>
            <div style="display: flex">
              <div style="display: flex; margin-right: 4rem">
                <div class="item_name" :class="{ active: item.inWaterModel == 0 }">手动抽水模式</div>
                <img v-if="item.inWaterModel == 0" class="status_img" src="@/assets/home/statuszc.png" alt="" />
                <img v-else class="status_img" src="@/assets/home/statusyc.png" alt="" />
              </div>
              <div style="display: flex">
                <div class="item_name" :class="{ active: item.inWaterModel == 1 }">自动抽水模式</div>
                <img v-if="item.inWaterModel == 1" src="@/assets/home/statuszc.png" class="status_img" alt="" />
                <img v-else src="@/assets/home/statusyc.png" class="status_img" alt="" />
              </div>
            </div>
          </div>
          <div class="right" v-if="item.type == 0">
            <div class="title">
              <div class="square"></div>
              水泵状态
            </div>
            <div style="display: flex">
              <div style="display: flex">
                <div class="item_name" :class="{ active: item.inPumpStatus == 1 }">水泵1自动</div>
                <img class="status_img" v-if="item.inPumpStatus == 1" src="@/assets/home/statuszc.png" alt="" />
                <img class="status_img" v-else src="@/assets/home/statusyc.png" alt="" />
              </div>
              <div style="display: flex">
                <div class="item_name" :class="{ active: item.inPumpStatus == 2 }">水泵2自动</div>
                <img v-if="item.inPumpStatus == 2" class="status_img" src="@/assets/home/statuszc.png" alt="" />
                <img v-else class="status_img" src="@/assets/home/statusyc.png" alt="" />
              </div>
              <div style="display: flex">
                <div class="item_name" :class="{ active: item.inPumpStatus == 3 }">停用</div>
                <img class="status_img" v-if="item.inPumpStatus == 3" src="@/assets/home/statuszc.png" alt="" />
                <img class="status_img" v-else src="@/assets/home/statusyc.png" alt="" />
              </div>
              <div style="display: flex">
                <div class="item_name" :class="{ active: item.inPumpStatus == 4 }">自流</div>
                <img class="status_img" v-if="item.inPumpStatus == 4" src="@/assets/home/statuszc.png" alt="" />
                <img class="status_img" v-else src="@/assets/home/statusyc.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  props: {
    boxArray: {
      type: Array,
      default: []
    },
    goinList: {
      type: Array,
      default: []
    }
  },
  methods: {
    showModal(item) {
      this.$emit('showModal', item)
    }
  }
}
</script>
<style lang="less" scoped>
// 鼠标移入清除省略号
.hover_title[data-title] {
  position: relative;

  // 样式：
  &:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
  }

  // 背景的样式 位置 字体等
  &:after {
    content: attr(data-title);
    position: absolute;
    padding: 1px 10px;
    left: 60px;
    bottom: -2.8em;
    height: 2rem;
    line-height: 2rem;
    // right: 0.5rem;
    border-radius: 4px;
    color: #fff;
    background-color: rgba(80, 79, 79, 0.8);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
    font-size: 14px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
  }
}

.top_box {
  display: flex;
  width: 98%;
  min-height: 23rem;
  background-color: #ffffff;
  // margin-right: 3rem;
  border-radius: 20px;
  margin: 1rem;
  margin-top: 0rem;
  align-items: center;
  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
  margin-bottom: 2rem;
}

.box {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding-bottom: 2rem;

  .item_title {
    position: relative;
    text-align: center;
    font-size: 2rem;
    border-radius: 3px;
    margin-left: 2rem;
    width: 13rem;
    background-color: #4472c4;
    height: 6rem;
    line-height: 6rem;
    color: #ffffff;
    box-shadow: 1px 1px 4px 5px rgba(215, 234, 251, 0.6);
    border: 2px solid #9dd0fd;
    margin-top: 2rem;
  }

  .item_box {
    position: relative;
    text-align: center;
    font-size: 1.7rem;
    border-radius: 3px;
    margin-left: 2rem;
    width: 13rem;
    height: 6rem;
    box-shadow: 1px 1px 4px 5px rgba(215, 234, 251, 0.6);
    border: 2px solid #9dd0fd;
    margin-top: 2rem;

    .el-icon-s-data {
      color: #e2e2e4;
      position: absolute;
      right: 0.3rem;
      bottom: 0;
      cursor: pointer;
      font-size: 1.3rem;
    }
  }
}

.bottom_box_ {
  display: flex;
  width: 98%;
  height: 22rem;
  background-color: #ffffff;
  // margin-right: 3rem;
  border-radius: 20px;
  margin: 1rem;
  margin-top: 0rem;
  align-items: center;
  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);

  .bottom_box {
    .left {
      background-color: #f4f8f9;
      box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      width: 40rem;
      height: 15rem;
      margin-bottom: 2rem;
      margin-left: 1rem;

      .title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-left: 2rem;
        margin-top: 1.5rem;
        display: flex;
        align-items: center;

        .square {
          width: 0.5rem;
          height: 1.5rem;
          background-color: #0386ff;
          margin-right: 0.5rem;
        }
      }
    }

    .right {
      background-color: #f4f8f9;
      box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      width: 70rem;
      height: 15rem;
      margin-bottom: 2rem;
      margin-left: 2.5rem;

      .title {
        font-size: 1.5rem;
        font-weight: bold;
        margin-left: 2rem;
        margin-top: 1.5rem;
        display: flex;
        align-items: center;

        .square {
          width: 0.5rem;
          height: 1.5rem;
          background-color: #0386ff;
          margin-right: 0.5rem;
        }
      }
    }
  }
}

.item_name {
  background: linear-gradient(to bottom, #dde7f4, #c8d6e9 70px);
  border-radius: 7px;

  box-shadow: 0px 1px 1px 0.5px rgba(0, 0, 0, 0.6) inset;
  // box-shadow: inset 0rem 0.07rem 0.21rem 0rem rgba(137, 137, 137, 0.5);
  margin-top: 2rem;
  margin-left: 1rem;
  width: 12rem;
  line-height: 4rem;
  height: 4rem;
  color: #000000;
  text-align: center;
  font-size: 1.7rem;
  text-shadow: 1px 1px 20px #bebebe;
}

.status_img {
  width: 3rem;
  height: 3rem;
  margin-top: 2.3rem;
  margin-left: 0.9rem;
}
</style>